<template>
    <div class="myset">
        <div class="detail">
            <span class="tab">基本信息</span>
            <div>
                <img src="../../../public/userimg/13.jpeg" alt="">
                <div>
                    <span>超级管理员 <el-tag type="danger" size="mini">管理员</el-tag></span>
                    <span>用户名：{{ master.username }}</span>
                    <span>手机号：{{ master.usertel }}</span>
                </div>
            </div>
        </div>
        <div class="operation">
            <span class="tab">账号安全</span>
            <div>
                <div>
                    <img src="@/assets/imgs/phone.svg" alt="">
                    <div>
                        <span>绑定手机</span>
                        <span>可用于账号登录、找回密码及其他安全保护</span>
                    </div>
                    <el-button type="primary" @click="dialogFormVisible = true">设置</el-button>
                </div>
                <div>
                    <img src="@/assets/imgs/wechat.svg" alt="">
                    <div>
                        <span>绑定微信</span>
                        <span>可用于账号登录及信息提醒</span>
                    </div>
                    <el-button type="primary">修改</el-button>
                </div>
                <div>
                    <img src="@/assets/imgs/password.svg" alt="">
                    <div>
                        <span>修改密码</span>
                        <span>不定期修改密码提升安全性</span>
                    </div>
                    <el-button type="primary" @click="dialogFormVisible1 = true">修改</el-button>
                </div>
                <div>
                    <img src="@/assets/imgs/password.svg" alt="">
                    <div>
                        <span>修改二级密码</span>
                        <span>操作重要凭证</span>
                    </div>
                    <el-button type="primary">修改</el-button>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="submit">
            <el-button type="primary">保存我的修改</el-button>
        </div>

        <!-- 设置弹出框 -->
        <el-dialog title="手机号设置" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="新的手机号" label-width="120px">
                    <el-input v-model="form.usertel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" label-width="120px">
                    <el-input v-model="form.code" autocomplete="off" style="width:350px"></el-input>
                    <el-button type="primary" style="margin:15px;" @click="getCode" :disabled="isreqCode">{{ btn_text
                    }}</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="密码设置" :visible.sync="dialogFormVisible1">
            <el-form :model="pwdform" :rules="rules" ref="pwdform">
                <el-form-item label="旧的密码" label-width="120px" prop="oldPwd">
                    <el-input v-model="pwdform.oldPWd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新的密码" label-width="120px" prop="newPwd">
                    <el-input v-model="pwdform.newPWd" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {

            master: '',
            form: {
                usertel: '',
                code: ''
            },
            pwdform: {
                oldPWd: '',
                newPWd: ''
            },
            dialogFormVisible: false,
            dialogFormVisible1: false,
            isreqCode: false,
            btn_text: '获取验证码',
            num: 60,
            rules: {
                oldPWd: [{ required: true, message: '请输入旧密码', blur: 'blur' }],
                newPWd: [{ required: true, message: '请输入新密码', blur: 'blur' }],
            }
        }
    },
    methods: {
        update() {
            this.dialogFormVisible = false;
        },
        getCode() {
            this.isreqCode = true;
            setInterval(() => {
                this.btn_text = this.num-- + 's'
            }, 1000);
        },
        updatePwd() {
            console.log(this.pwdform.newPWd, this.pwdform.newPWd);
        }
    },
    mounted() {
        this.$http.userInfoApi.queryMaster().then(res => {
            // console.log(res);
            this.master = res.data.data[0];
        })
    },


}



</script>

<style lang="scss" scoped>
.myset {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

    span.tab {
        border-left: 3px solid gray;
        border-bottom: 1px solid #ddd;
        margin: 10px;
        font-size: 14px;
        color: #444;
        padding: 5px;
    }

    >.detail {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;

        div {
            display: flex;
            margin: 10px 0 0 20px;


            >img {
                width: 80px;
                height: 80px;
                display: block;
                border-radius: 8px;
            }

            >div {
                display: flex;
                justify-content: space-between;
                flex-direction: column;

                >span:first-child {
                    font-weight: 900;
                    font-size: 1.1rem;
                }

                >span:not(:first-child) {
                    color: #555;
                }
            }
        }
    }

    .operation {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        height: 200px;

        >div {
            display: flex;
            flex-flow: row wrap;

            >div {
                width: 46%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 15px;

                >div {
                    flex: 1;
                    display: flex;
                    flex-flow: column;
                    justify-content: flex-start;
                    margin-left: 10px;

                    >span:first-child {
                        color: #000;
                        font-weight: bold;
                        margin-bottom: 3px;
                    }

                    >span:last-child {
                        color: #555;
                        font-size: 14px;
                    }
                }
            }
        }

        img {
            width: 35px;
            height: 35px;
        }
    }

    .submit {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>